<template>
   <div class="box" style="height:50px">
      <!-- <p class="boxTemperature">{{weatcherData.wendu}}°</p>
      <p class="boxWeather">{{yesterday.type}}</p>
      <p class="boxWind">{{(yesterday.fx)}}{{yesterday.fl | windSpeed}}</p>
      <p class="boxCity">{{weatcherData.city}}市</p> -->
   </div>
</template>

<script>
import axios from 'axios'
export default {
   data(){
      return{
         weatcherData: {},
         yesterday: {}
      }
   },
   created() {
      // this.getWeather();
      this.timer = setInterval(() => {
         // this.getWeather();
      }, 1000 * 60 * 60)		
   },
   methods: {
      // getWeather() { // 第三方天气api接口
      //    axios.get('http://wthrcdn.etouch.cn/weather_mini',{
      //       params: {
      //       	// "returnCitySN"就是在index.html引入的script中返回的当前省市位置
      //          city: (returnCitySN.cname).split('省')[1] 
      //       }
      //    }).then(res =>{
      //       if(res.data.data) {
      //          this.weatcherData = res.data.data;
      //          this.yesterday = res.data.data.yesterday;
      //       }
      //    }).catch(err =>{
      //       console.log(err);
      //    })
      // }
   },
   filters: {
      windSpeed(val) {
         if(!val) return ''
         let windSpeed  = val.toString().slice(9,11);
         return windSpeed
      }
   }
}
</script>

<style scoped>
.box{
   display: flex;
   align-items: center;
   color: #fff;
   margin-right: 20px;
}
.boxTemperature{
   font-size: 18px;
}
.boxWeather{
   font-size: 14px;
   margin: 0 0 0 15px;
}
.boxWind{
   margin: 0 15px 0 8px;
   font-size: 14px;
}
.boxCity{
   font-size: 16px;
}
</style>
